<template>
  <div>
    <div
      class="warmer-section"
      :style="'background-image: url(' + bannerArray[randomIndex] + ');'"
    ></div>
    <div class="detailcontainer">
      <div class="infosbox">
        <div class="newsview">
          <h3 class="news_title">{{ articleItem.title }}</h3>
          <div class="bloginfo">
            <ul>
              <li class="author">
                <a href="/">{{ articleItem.author }}</a>
              </li>
              <li class="lmname">
                <a href="/">{{ articleItem.categoryName }}</a>
              </li>
              <li class="timer">{{ articleItem.publishTime }}</li>
              <li class="view">{{ articleItem.showCount }}</li>
            </ul>
          </div>
          <div v-if="articleItem.articleTags" class="tags">
            <a
              href="javascript:void(0)"
              target="_blank"
              v-for="tag in articleTagAliaName"
            >
              {{ tag }}
            </a>
          </div>
          <div class="news_about" v-show="articleItem.abstractContent != ''">
            <strong>简介</strong>{{ articleItem.abstractContent }}
          </div>
          <div class="news_con" id="divcontent">
            <div class="news_con">
              <mavon-editor
                ref="md"
                :value="articleItem.content"
                :subfield="false"
                :defaultOpen="'preview'"
                :toolbarsFlag="false"
                :editable="false"
                :scrollStyle="true"
                :ishljs="true"
              />
            </div>
          </div>
        </div>
        <!-- <keep-alive>
        <warmer-comment-view
          v-bind:data="articleItem"
          v-bind:user="userItem"
          @showlogin="changeLoginState"
        ></warmer-comment-view>
      </keep-alive> -->

        <!-- <div v-show="isShowLogin" class="login_dialog_wrapper">
        <warmer-applogin-view
          @showlogin="changeLoginState"
          v-bind:returnurl="returnUrl"
        ></warmer-applogin-view>
      </div> -->
      </div>
    </div>

    <div class="big_img">
      <div class="swiper-container2">
        <div class="swiper-wrapper"></div>
      </div>
    </div>
    <div class="sidebardetail" v-show="RelvantArticle.length > 0">
      <div class="tuijian">
        <h2 class="hometitle">相关推荐</h2>
        <ul class="tjpic">
          <i><img :src="randomBannerItem.imgSrc" /></i>
          <p>{{ randomBannerItem.title }}</p>
        </ul>
        <ul class="sidenews">
          <li v-for="item in RelvantArticle">
            <p>
              <a :href="['/detail/' + item.id]">{{ item.title }}</a>
            </p>
            <span>{{ item.publishTime }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import '@/assets/blog/base.css'
import '@/assets/blog/index.css'
import '@/assets/blog/comment.css'
import { ArticleApi, CategoryApi, BannerApi, TagApi } from '@/api/blog'
export default {
  name: 'detail',
  data() {
    return {
      userItem: {},
      returnUrl: '',
      commentdata: '',
      bannerArray: [
        'http://file.miaoleyan.com/b2.jpg',
        'http://file.miaoleyan.com/b5.gif',
        'http://file.miaoleyan.com/b3.jpg',
        'http://file.miaoleyan.com/b1.png',
        'http://file.miaoleyan.com/b4.jpg'
      ],
      randomIndex: 0,
      articleItem: {
        status: '0',
        title: '', // 文章题目
        author: '',
        categoryId: 0,
        categoryName: '',
        content: '', // 文章内容
        abstractContent: '', // 文章摘要
        coverImageList: [], // 文章图片
        publishTime: undefined, // 前台展示时间
        showStyle: 0,
        id: 0,
        openComment: 0, //打开评论
        articleTags: []
      },
      isShowLogin: false,
      articleTagAliaName: [],
      randomBannerItem: {},
      RelvantArticle: [],
      detailhtml: '',
      showMore: true,
      loading: true,
      offset: 300,
      offset_opacity: 1200,
      scroll_top_duration: 700,
      scrollTop: 0,
      defaultfollowUsPosition: 0,
      followUsPosition: 0,
      imageurl: '',
      showbigimage: false
    }
  },
  created() {
    var articleId = this.$route.query.id
    this.initArticleModel(articleId)
    this.getRelvantArticle()
    this.getRandomBanner()
  },
  mounted() {},
  methods: {
    changeLoginState(data) {
      this.isShowLogin = data
    },
    getRandomBanner() {
      var _this = this
      var param = {
        pageIndex: 1,
        pageSize: 10,
        title: '',
        sortCode: '1'
      }
      BannerApi.getBannerList(param).then(response => {
        if (response.code == 0) {
          var random = parseInt(Math.random() * response.data.rows.length, 10)
          _this.randomBannerItem = response.data.rows[random]
        }
      })
    },
    getRelvantArticle() {
      var _this = this
      ArticleApi.getRelevantArticle(this.articleItem.id).then(response => {
        if (response.code == 0) {
          _this.RelvantArticle = response.data
        }
      })
    },
    initArticleModel(articleId) {
      if (articleId && articleId > 0) {
        ArticleApi.getDetailData(articleId).then(response => {
          let articleModel = response.data
          if (articleModel) {
            this.articleItem.status = articleModel.status
            this.articleItem.title = articleModel.title
            this.articleItem.author = articleModel.author
            this.articleItem.content = articleModel.content
            this.articleItem.abstractContent = articleModel.abstractContent
            this.articleItem.coverImageList = articleModel.coverImageList
            this.articleItem.publishTime = articleModel.publishTime
            this.articleItem.id = articleModel.id
            this.articleItem.showStyle = articleModel.showStyle
            this.articleItem.categoryId = articleModel.categoryId
            this.articleItem.categoryName = articleModel.category.categoryName
            this.articleItem.openComment = articleModel.openComment
            this.articleItem.articleTags = articleModel.articleTags
            var tagLists = articleModel.articleTags.split(',')
            this.articleItem.articleTags = tagLists
            this.articleTagAliaName = articleModel.articleTagAliaName
          }
        })
      }
    },
    backToTop() {
      document.body.scrollTop = 0
      document.documentElement.scrollTop = 0
    }
  }
}
</script>
<style scoped>
.loginBox {
  position: fixed;
  top: 35%;
  left: 50%;
  margin-left: -200px;
  border-radius: 5px;
  width: 300px;
  padding: 28px 50px 38px;
  background-color: rgb(255, 255, 255) !important;
}
.login_dialog_wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  margin: 0;
  background-color: rgba(128, 128, 128, 0.3);
}

.warmer-section {
  background-color: #000;
  background: no-repeat center center;
  background-attachment: scroll;
  position: relative;
  color: white;
  max-height: 100vh;
  height: 300px;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
  width: 78px !important;
}
.editormd-preview-container,
.editormd-html-preview {
  padding: 20px 0px !important;
}
.editormd-preview-container ol.linenums,
.editormd-html-preview ol.linenums {
  color: #999;
  padding-left: 2.5em;
  width: 100vh !important;
}
.big_img {
  position: fixed;
  z-index: -1;
  opacity: 0;
  background: rgba(255, 255, 255, 0.9);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.big_img .swiper-container2 {
  position: relative;
  width: 100%;
  height: 100%;
}
.big_img .swiper-container2 .swiper-wrapper {
  width: 100%;
  height: 100%;
}
.big_img .swiper-slide {
  width: 100%;
  height: 100%;
  display: table;
}
.big_img .swiper-slide .cell {
  width: 100%;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.big_img .swiper-slide img {
  max-width: 90%;
  max-height: 80%;
  margin: 0 auto;
}
.big_img .swiper-pagination2 {
  position: absolute;
  top: 0.2rem;
  text-align: center;
  width: 100%;
}
.big_img .swiper-pagination2 span {
  margin: 0 0.05rem;
}
</style>
